<template>
  <div class="container-item-upload">
    <draggable
      :list="audioList"
      @update="sortHandler"
    >
      <uploadItem
        v-for="(emenent,index) in audioList"
        :key="index"
        :index="index"
        :value="emenent"
        @fail="uploadFailHandler"
        @delete="deleteResourceHandelr"
        @upload="editResourceHandler"
      />
    </draggable>
    <div class="item-upload-btn el-icon-plus"> 上传音频
      <input
        class="item-upload-input"
        type="file"
        accept=".mp3, .wav, .ogg"
        @change="checkFileHandler"
      >
    </div>
  </div>
</template>

<script>
// item
import draggable from 'vuedraggable';
import uploadItem from './uploadItem.vue';

export default {
  components: { draggable, uploadItem },
  props: {
    audioList: {
      type: Array,
      required: true
    }
  },
  methods: {
    uploadFailHandler(...args) {
      this.$emit('fail', ...args);
    },
    deleteResourceHandelr(index, value) {
      this.$emit('delete', index, value);
    },
    editResourceHandler(...args) {
      this.$emit('upload', ...args);
    },
    sortHandler(index) {
      this.$emit('sort', this.audioList);
    },
    checkFileHandler(evt) {
      this.$emit('checkFile', evt.target.files[0]);
      evt.target.value = null;
    }
  }
};
</script>
